<!-- components/comment-item.vue -->
<template>
  <view>
    <!-- 当前评论 -->
    <view class="msmall" @click.stop="huifu(comment, item)">
      <view>
        <text style="color: #2979ff">{{ comment.username }}</text>
        ：{{ comment.content }}
      </view>
    </view>

    <!-- 递归渲染回复列表 -->
    <view v-if="comment.list && comment.list.length" class="reply-list">
      <view
        v-for="(reply, q) in comment.list"
        :key="q"
        class="reply-item"
        @click.stop="huifu(reply, item)">
        <view style="margin-top: 10rpx">
          <view>
            <text style="color: #2979ff">{{ reply.username }}</text>
            回复
            <text style="color: #2979ff">{{ comment.username }}</text>
            ：{{ reply.content }}
          </view>
        </view>

        <!-- 递归调用自身组件来处理嵌套回复 -->
        <comment-item
          :comment="reply"
          :item="item"
          @reply="$emit('reply', $event, item)" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "comment-item",
  props: {
    comment: {
      type: Object,
      required: true,
    },
    item: {
      type: Object,
      required: true,
    },
  },
  methods: {
    huifu(comment, item) {
      this.$emit("reply", comment, item);
    },
  },
};
</script>

<style>
.reply-list {
  margin-top: 10rpx;
}

.reply-item {
  margin-bottom: 10rpx;
}
</style>
